SEQ 0041-87101:14:09
The rack
Blue and green diodes in the dark, the drone of fans. A card is a record: a header strip, a picture, a body and a foot.
01#a3f9…c2
Generic page
Prose
Winbon is a token-driven multi-page template built on one idea: two versions, no judge. Two equal accents, every surface a record, and nothing ever deleted — only moved.
Entry
Where this comes from
Winbon is built out of a real place in a real text: the city on the Danube in Version Conflict, a short story from Luko Karavan's Antihistor cycle, in English on Substack.
05:02 Over the city spreads the blue-black of the moments just before night ends. The left bank belongs to glass and steel, the right to cobblestones, and a bridge in the mist runs between them. Every accent on this page belongs to one of those two banks: glass for everything you can act on, sodium for everything that has been recorded.
The reading column is set flush left in block paragraphs, the way a report is set rather than a novel: a clear gap between paragraphs, no first-line indent, no drop cap. A report opens with the time it was written instead of an initial. Headlines use a newspaper serif in sentence case; everything that is a record — a sequence number, a timestamp, a fingerprint, the interface itself — is set in mono.
Nothing here needs a build step, a framework or a package manager. Three font families, five stylesheets, one script.
Headings
Heading level two
A section heading carries a short fork under it: one hairline that splits into glass and sodium and joins again.
Heading level three
Level three switches to the civil-service grotesque and takes a muted section sign, like a paragraph of an act.
Heading level four
From here down the headings stop announcing and simply file things.
Heading level five
Still the grotesque, still sentence case.
Heading level six
The smallest step doubles as a record label: mono, tracked out, muted.
Multi-column text
Columns are divided by a dotted hairline, an edge that has not been validated yet, so a newspaper block still reads as a printout rather than a spreadsheet.
Three columns collapse to two below nine hundred pixels and to one below six hundred and forty, and the rule disappears with them.
The column count is not built into any component: it is a utility class you drop onto any container that holds running text.
The measure stays readable because the gutter is a spacing token, not a number typed into the one rule that needed it.
Text wrap
A picture floats into the column and the text closes around it. Below six hundred and forty pixels the float is dropped and the figure becomes a full-width block, because a three-word line beside a picture is not typesetting.
Every picture sits inside a drawn panel. The panel is the fallback: if the file is missing, the scene's two colours and its mono slug show through. A photograph dropped into the same slot can take the optional duotone class, which maps it to the blue-black ground and one of the two versions.
The caption underneath is a record label: mono, small, muted — present when you look for it, silent when you do not.
Cards
SEQ 0041-87201:16:40
The zone
Corrugated iron and a cold cone of sodium light, north of the city. Point at the fingerprint below and its twin lights up.
02#a3f9…c2
SEQ 0038-114archivedinactive branch
The tablet
An archived record is not deleted. It moves to an inactive branch: it loses its contour, never its existence.
03#77e0…1b
Twin record
Two records with the same sequence number and the same timestamp, both validated, both locked. Neither is marked as the true one: the system does not judge content, only format.
SEQ 0041-8772020-01-14 01:20:00A
Call-out dispatched
The crew arrives in time. The patient is stabilised and handed over to the hospital.
#5c01…d7
SEQ 0041-8772020-01-14 01:20:00B
Unit remains at station
The ambulance stands at the station the whole while. The call-out never happens at all.
#5c01…d7
Passive storage
2Equal accents
5Stylesheets
0Records deleted
1994Continuity act
Inline text
Running copy can carry strong emphasis, italics for the spoken voice, a link that comes into focus on hover, a sequence the analyst has ringed in pencil, and a clause moved to an inactive branch — never struck through. Technical writing gets inline code in glass, keys such as Ctrl + K, an abbreviation like CDI, plus H2O and the 17th district.
Whatever passes validation once, stays.
Lists
Unordered — log dashes
- Markers are dashes, the way a log marks a line
- Nested levels drop to a dot
- Second level
- Second level again
- No rings — those belong to another city
Ordered — sequence numbers
- Ordinals are set in mono
- In sodium, with a leading zero
- Everything that counts is a record
Quotes
By tomorrow there may be no one left alive who cares about this. But once that information has been radiated out into the world, it is never lost.
Notte, the department of inactive branches
Pull quote
Two versions. Both valid, both locked, both forever.
Table
| Sequence | Record | Branch |
|---|---|---|
| 0040-102 | Administrative log, May | inactive |
| 0040-388 | Weekend operations report | inactive |
| 0041-015 | Company-vehicle parking | inactive |
| 0041-877 | Ambulance call-out | active × 2 |
Minimal variant
| Step | px |
|---|---|
| --sp-4 | 16 |
| --sp-8 | 32 |
| --sp-24 | 96 |
Buttons
Primary, default & ghost
Semantic variants
With an icon
Badges & tags
Glass
Sodium
Live
Revoked
Archived
Tags — fingerprints
Palette
glass
sodium
diode
pen
paper
Callouts = entries
Entry
CDI
The Central Depository of Information: an archive into which records from the whole of the city's infrastructure flow automatically, without exception and without erasure.
Tip
Variants swap a single variable. Nothing else in the rule changes.
Warning
Only the spacing steps 1, 2, 3, 4, 6, 8, 12, 16 and 24 exist. An undefined step is an invalid value and silently kills the whole rule.
Accordion
Does it need JavaScript?
No. The accordion is a native details element; the marker jumps from plus to minus through the open attribute alone.
How does the light theme work?
A light page links tokens-light.css instead of tokens.css. Nothing else in the markup or the other stylesheets changes.
What stays dark in light mode?
Code blocks, logs and the basement band. A monitor glows into the dark even by day, and the inactive branches are underground either way.
Definition list
- Record
- The surface every component is built on: a header with a sequence number, a time and a fingerprint.
- Twin
- Two records under one sequence number. Neither is the winner.
- Inactive branch
- Where things go instead of being deleted.
Form controls
Code & log
:root {
--bg0: #0a1020;
--acc-glass: #5ec4de; /* version A */
--acc-sodium: #e8604f; /* version B */
}
.twin__a { --acc: var(--acc-glass); }
.twin__b { --acc: var(--acc-sodium); }Log view
- 01:18:02 login sync-if v.brenn vpn
- 01:20:00 recv 0041-877 dispatch valid
- 01:20:00 recv 0041-877 dispatch duplicate
- 01:20:01 lock 0041-877 ×2 stored
Gauges
Synchronisation window72%
Grid load, third circuit0.97
Archive integrity0.88
Gallery
Variant A — stage with a thumbnail rail
The bridge — five in the morning, mist on the river
Variant B — thumbs as a side rail
The bridge — five in the morning, mist on the river
Variant C — filmstrip with nav arrows
The bridge — five in the morning, mist on the river
End of the sink
Everything above is drawn from css/tokens.css. Swap that one file for css/tokens-light.css and the same markup becomes the light theme: tabulating paper instead of the blue hour, with code, logs and the basement still dark — a monitor glows even by day.